<template>
  <div class="container">
    <el-card>
      <!-- 新增 -->
      <el-row>
        <el-col :span="24" style="margin-bottom: 15px;">
          <span class="hong">说明:目前支持学科和关键字条件筛选</span>
          <!-- 按钮 -->
          <el-button
            type="success"
            icon="el-icon-edit"
            size="small"
            style="float:right"
            @click="toAddQuestion()"
            >新增试题</el-button
          >
        </el-col>
      </el-row>
      <!-- 筛选条件 -->
      <!-- 筛选区域 -->
      <el-row>
        <el-form label-width="80px" :inline="true" :model="fromList">
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  v-model="fromList.subjectID"
                  @change="questionChange(fromList.subjectID)"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in subjectes"
                    :key="item.id"
                    :value="item.id"
                    :label="item.subjectName"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select v-model="fromList.catalogID" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in directory"
                    :key="index"
                    :label="item.directoryName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select v-model="fromList.tags" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in tagList"
                    :key="index"
                    :label="item.tagName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  v-model="fromList.keyword"
                  placeholder="根据题干搜索"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select v-model="fromList.questionType" placeholder="请选择">
                  <el-option
                    v-for="(v, k, i) in questionType"
                    :key="i"
                    :label="v"
                    :value="k"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="难度">
                <el-select v-model="fromList.difficulty" placeholder="请选择">
                  <el-option
                    v-for="(v, k, i) in difficulty"
                    :key="i"
                    :label="v"
                    :value="k"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select v-model="fromList.direction" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in direction"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select v-model="fromList.creatorID" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in userList"
                    :key="index"
                    :value="item.username"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input v-model="fromList.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input v-model="fromList.shortName"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-row>
                <el-form-item label="城市">
                  <!-- 省份 -->
                  <el-select
                    v-model="fromList.province"
                    placeholder="请选择"
                    :style="{ width: '90px', 'margin-right': '5px' }"
                    @change="onProvinceChange"
                  >
                    <el-option
                      v-for="(v, k, i) in province"
                      :key="i"
                      :label="v"
                      :value="v"
                    ></el-option>
                  </el-select>
                  <!-- 市 -->
                  <el-select
                    v-model="fromList.city"
                    placeholder="请选择"
                    style="width: 90px"
                  >
                    <el-option
                      v-for="(v, k, i) in citys"
                      :key="i"
                      :label="v"
                      :value="v"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-row>
            </el-col>

            <el-col :span="6">
              <el-form-item style="float: right">
                <el-button type="primary" size="small" @click="btnCancel"
                  >清除</el-button
                >
                <el-button size="small" type="primary" @click="btnOk"
                  >搜索</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
      <!-- 数据 -->
      <el-row>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="all">
            <containers
              :subjects="subjects"
              @getChoices="getChoice()"
            ></containers>
          </el-tab-pane>
          <el-tab-pane label="待审核" name="0">
            <template>
              <containers
                :subjects="subjects"
                @getChoices="getChoice()"
              ></containers>
            </template>
          </el-tab-pane>
          <el-tab-pane label="已审核" name="1">
            <template>
              <containers
                :subjects="subjects"
                @getChoices="getChoice()"
              ></containers>
            </template>
          </el-tab-pane>
          <el-tab-pane label="已拒绝" name="2">
            <template>
              <containers
                :subjects="subjects"
                @getChoices="getChoice()"
              ></containers>
            </template>
          </el-tab-pane>
        </el-tabs>
      </el-row>

      <!-- 分页 -->
      <el-pagination
        class="pager"
        background
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        :page-size="fromList.pagesize"
        :current-page="fromList.page"
        :page-sizes="[5, 10, 20, 50]"
        @current-change="changePager"
        @size-change="sizeChange"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
// 导入城市和区域/县
import { provinces, citys } from '@/api/hmmm/citys'
import { list as creatorList } from '@/api/base/users.js'
import { list as subList } from '@/api/hmmm/subjects.js'
import { choice } from '@/api/hmmm/questions.js'
import containers from '../components/questions-preview'
import { list as dirList } from '@/api/hmmm/directorys.js'
// 标签接口
import { list as tagList } from '@/api/hmmm/tags.js'

export default {
  name: 'questionsAhoice',
  data () {
    return {
      isRouterAlive: true,
      fromList: {
        page: 1,
        pagesize: 20, // 每页显示多少  /** */
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题难度
        tags: null, // 标签名称
        province: null, // 企业所在地省份
        city: null, // 企业所在城市
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
        chkState: null
      }, // 获取的筛选数据
      // 审核试题的对话框
      checkDialogVisible: false,
      // 标签页活动值
      activeName: 'all',
      // 预览时传入子组件的试题
      questionItem: {},
      // 试题预览
      dialogVisible: false,
      // 数据总数
      counts: 0,
      // 题库列表
      questionList: [],
      // 二级目录列表
      directory: [],
      // 区域列表
      citys: [],
      // 城市列表
      province: provinces(),
      // 标签列表
      tagList: [],
      // 录入人列表
      userList: [],
      // 方向
      direction: [
        'o2o',
        '外包服务',
        '企业服务',
        '互联网金融',
        '企业咨询',
        '互联网',
        '电子商务',
        '其他'
      ],
      // 试题类型
      difficulty: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      // 难度
      questionType: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      // reqParams: {
      //   page: 1,
      //   pagesize: 10,
      //   chkState: null
      // },
      formInline: {
        user: '',
        region: ''
      },
      total: 0,
      labelPosition: 'right',
      subjectes: [],
      subjects: [],
      questionJects: []
    }
  },

  methods: {
    //  获取录入人
    async getCreator () {
      try {
        const { data: res } = await creatorList({
          page: 1,
          pagesize: 100,
          keyword: ''
        })
        this.userList = res.list
      } catch (error) {}
    },
    // 获取学科列表
    async getSubjects () {
      const { data } = await subList(this.fromList)
      this.subjectes = data.items
      // console.log(this.questForm.subjectID);
    },
    // 选中学科 change 事件  获取 二级目录值和标签
    async questionChange (id) {
      const { data } = await dirList({
        subjectID: id
      })
      this.directory = data.items
      const { data: res } = await tagList({
        subjectID: this.fromList.subjectID
      })
      this.tagList = res.items
    },

    // 当市级发生变化时触发的函数
    onProvinceChange (val) {
      this.citys = citys(val)
      this.fromList.city = this.citys[0]
    },

    // 搜索
    async btnOk () {
      this.fromList.page = 1
      this.getChoice()
    },
    // 取消搜索
    btnCancel () {
      this.fromList = {
        pagesize: 10,
        page: 1,
        keyword: ''
      }
      this.getChoice()
    },

    // 去添加试题的页面
    toAddQuestion () {
      this.$router.push('new')
    },
    // onSubmit() {
    //   console.log("submit!");
    // },
    // handleClick(tab, event) {
    //   console.log(tab, event);
    // },
    // 分页
    changePager (newPage) {
      this.fromList.page = newPage
      this.getChoice()
    },
    // 尺码
    sizeChange (news) {
      this.fromList.pagesize = news
      this.fromList.page = 1
      this.getChoice()
    },
    // 获取数据
    async getChoice () {
      const { data } = await choice(this.fromList)
      console.log(data)
      this.subjects = data.items
      this.total = data.counts
    },

    handleClick () {
      switch (this.activeName) {
        case 'all':
          this.fromList.chkState = null // 全部状态
          this.getChoice() // 重新获取列表
          break
        case '0':
          this.fromList.chkState = 0 // 待审核
          this.getChoice() // 重新获取列表
          break
        case '1':
          this.fromList.chkState = 1 // 通过
          this.getChoice() // 重新获取列表
          break
        case '2':
          this.fromList.chkState = 2 // 不通过
          this.getChoice() // 重新获取列表
          break
      }
    }
  },
  components: {
    containers
  },
  created () {
    this.getCreator()
    this.getChoice()
    this.getSubjects()
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 10px 15px;
  .hong {
    color: #ffc4d7;
    font-size: 12px;
  }
  .el-input,
  .el-select {
    width: 225px;
  }
  .pager {
    margin: 15px 0 10px;
    float: right;
  }
}
</style>
